<template>
    <div class="view">
        <p class="title">请选择支付方式：</p>
        <div class="tab-view">
            <Tabs name="cash" :animated="false" @on-click="changeTabs">
                <TabPane label="现付" name="cash">
                    <div class="payWay-view">
                        <div class="payway" v-for="(item, index) in payWayList" @click="clickPayWay(item,index)">
                            <img :src="item.imageUrl" alt="">
                            <p>{{item.label}}</p>
                        </div>
                    </div>
                    <div class="price-view" v-if="getMoneyShow">
                        <p>
                            实收：
                            <InputNumber 
                                v-model="getMoney" 
                                @on-focus="onFocus">
                            </InputNumber>
                            找零：{{remainMoney.toFixed(2)}}
                        </p>
                    </div>
                </TabPane>
                <TabPane label="挂账" name="8">
                    <Checkbox true-value="1" false-value="0" v-model="data.isHand">是否挂账</Checkbox>
                </TabPane>
            </Tabs>
        </div>
        <!-- 计算器弹窗 -->
        <div class="calc-view" v-if="calcShow">
            <XCalcModal
                @on-click-action="clickAction">
            </XCalcModal>
        </div>
        <!-- 会员卡验证 -->
		<div v-if="memberRuleData.isShow">
			<XMemberRuleModal
				:data="memberRuleData">
			</XMemberRuleModal>
		</div>
    </div>
</template>

<script>
import XCalcModal from '@/components/XCalcModal'
import roomService from '@/network/service/roomService.js'
import XMemberRuleModal from '@/pages/goods/view/XMemberRuleModal'

    export default {
        props: ['data', 'isMember', 'orderPrice'],
        components: {XCalcModal,XMemberRuleModal},
        data() {
            return {
                getMoney: 0,
                calcShow: false,
                getMoneyShow: true,
                remainMoney: 0,
                roomList: [],
                roomData: {
                    name: '',
                    phoneNum: ''
                },
                payWayList: [
                    {
                        imageUrl: require('@/assets/mo-1.png'),
                        label: '现金'
                    },
                    {
                        imageUrl: require('@/assets/zpay-0.png'),
                        label: '支付宝'
                    },
                    {
                        imageUrl: require('@/assets/we-0.png'),
                        label: '微信'
                    },
                    {
                        imageUrl: require('@/assets/vip-0.png'),
                        label: '会员卡'
                    },
                    {
                        imageUrl: require('@/assets/card-0.png'),
                        label: '银联卡'
                    },
                    {
                        imageUrl: require('@/assets/hun-0.png'),
                        label: '混合支付'
                    }
                ],
                memberRuleData: {
                    isShow: false,
                    isLoading: false,
                    data: {}
                }
            }
        },
        mounted() {
            this.getRoomList();
        },
        methods: {
            onFocus() {
			    this.calcShow = true;
            },
            changeRoom(val) {
                this.roomCostDetail(val);
                this.remainMoney = 0;
            },
            clickAction(formData) {
                switch(formData) {
                    case 'sure': 
                        if (this.getMoney < this.orderPrice) {
                            this.$Message.error('实收金额不正确');
                        } else {
                            this.calcShow = false;
                            this.remainMoney = +this.getMoney - this.orderPrice;
                        }
                    break
                    case 'clear': 
                        this.getMoney = 0;
                    break
                    case 'del': 
                        if (this.getMoney != 0) {
                            if (this.getMoney.toString().length > 1) {
                                this.getMoney = this.getMoney.toString().substring(0 ,this.getMoney.toString().length - 1)
                            } else {
                                this.getMoney = 0;
                            }
                        }
                    break
                    case '00': 
                        if (this.getMoney != 0) {
                            this.getMoney = parseFloat(this.getMoney + '00')
                        }
                    break
                    case 100: 
                        this.getMoney = parseFloat(this.getMoney) + 100;
                    break
                    case 200: 
                        this.getMoney = parseFloat(this.getMoney) + 200;
                    break
                    case 500: 
                        this.getMoney = parseFloat(this.getMoney) + 500;
                    break
                    case 1000: 
                        this.getMoney = parseFloat(this.getMoney) + 1000;
                    break
                    case '.': 
                        if (this.getMoney.toString().indexOf('.') == -1) {
                            this.getMoney = (this.getMoney + formData);
                        }
                    break
                    default: 
                        this.getMoney = parseFloat(this.getMoney + formData.toString());
                    break
                }
            },
            clickPayWay(item, index) {
                this.payWayList = [
                    {
                        imageUrl: require('@/assets/mo-0.png'),
                        label: '现金'
                    },
                    {
                        imageUrl: require('@/assets/zpay-0.png'),
                        label: '支付宝'
                    },
                    {
                        imageUrl: require('@/assets/we-0.png'),
                        label: '微信'
                    },
                    {
                        imageUrl: require('@/assets/vip-0.png'),
                        label: '会员卡'
                    },
                    {
                        imageUrl: require('@/assets/card-0.png'),
                        label: '银联卡'
                    },
                    {
                        imageUrl: require('@/assets/hun-0.png'),
                        label: '混合支付'
                    }
                ];
                switch(item.label) {
                    case '现金':
                        this.payWayList[index].imageUrl = require('@/assets/mo-1.png')
                        this.getMoneyShow = true;
                        this.calcShow = false;
                        this.data.payWay = 2;
                    break;
                    case '支付宝':
                        this.payWayList[index].imageUrl = require('@/assets/zpay-1.png')
                        this.getMoneyShow = false;
                        this.calcShow = false;
                        this.data.payWay = 4;
                    break;
                    case '微信':
                        this.payWayList[index].imageUrl = require('@/assets/we-1.png')
                        this.getMoneyShow = false;
                        this.calcShow = false;
                        this.data.payWay = 5;
                    break;
                    case '会员卡':
                        this.payWayList[index].imageUrl = require('@/assets/vip-1.png')
                        this.getMoneyShow = false;
                        this.calcShow = false;
                        this.data.payWay = 1;
                        this.memberRuleData.isShow = true;
                        this.memberRuleData.isLoading = false;
                        this.memberRuledata = {}
                    break;
                    case '银联卡':
                        this.payWayList[index].imageUrl = require('@/assets/card-1.png')
                        this.getMoneyShow = false;
                        this.calcShow = false;
                        this.data.payWay = 6;
                    break;
                    case '混合支付':
                        this.payWayList[index].imageUrl = require('@/assets/hun-1.png')
                        this.calcShow = false;
                        this.getMoneyShow = false;
                    break;
                };
            },
            changeTabs(name) {
                if (name != 'cash') {
                    this.data.payWay = name;
                } else {
                    this.data.payWay = '';
                }
                this.calcShow = false;
            },
            clickSure() {
                this.$emit('on-click')
            },

            getRoomList() {
                let params = {
                    scales: '',
                    status: 3
                }
                roomService.getRoomList(params).then(res => {
                    let result = res.data;
                    let code = result.rescode;
                    let resmsg = result.msg;
                    if (code == 100) {
                        this.roomList = [];
                        result.data.map(item => {
                            if (item.payType == 8) {
                                this.roomList.push(item);
                            }
                        })
                    } else {
                        this.$Message.error(resmsg);
                    }
                }, error => {
                    this.$Message.error('服务器异常，请稍后再试');
                })
            },
            roomCostDetail(id) {
                roomService.roomCostDetail(id).then(res => {
                    let result = res.data;
                    let code = result.rescode;
                    let resmsg = result.msg;
                    if (code == 100) {
                        this.roomData.name = result.data.name;
                        this.roomData.phoneNum = result.data.phoneNum;
                    } else {
                        this.$Message.error(resmsg);
                    }
                }, error => {
                    this.$Message.error('服务器异常，请稍后再试');
                })
            }
        }
    }
</script>

<style scoped lang="less">
.view {
    position: relative;
    .title {
        opacity: 0.6;
        font-size: .14rem;
        color: #433E41;
    }
    .payWay-view {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: .3rem;
        img {
            width: .6rem;
            height: .6rem;
            cursor: pointer;
        }
        p {
            text-align: center;
        }
    }
    .calc-view {
		position: absolute;
		top: 2.5rem;
		left: 2.5rem;
		z-index: 9999;
    }
    .submitBtn {
        margin-top: .2rem;
    }
}
</style>